<template>
	<view>
		<view class="topnav">
			<van-nav-bar title="登录"  left-arrow @click-left="onClickLeft">
			</van-nav-bar>
		</view>
		<view class="box">
			<view class="log">
				<view class="title">
					<text>识惠</text>
				</view>
				<view class="login">
					<text>登录您的账户</text>
				</view>
				<view class="user">
					<input type="text" placeholder="请输入您的账户" v-model="user">
					<input type="password" name="pwd" id="" v-model="pwd" placeholder="请输入您的密码" :password="showpwd">
				</view>
				
				<view class="ty">
					<checkbox-group @change="checkState">
					<label>
						<checkbox value="cb" :checked="check" color="#085710" style="transform:scale(0.7)"/>
					</label>
					 请确认阅读并同意用户协议和隐私政策
					</checkbox-group>
				</view>
				<view class="wj">
					<text>忘记密码?</text>
				</view>
				
				<view class="clicklogin">
					<van-button round type="info" color="#085710" style="width: 200rpx;" @click="logIn"> 登 录 </van-button>
					<van-button round type="info" color="#085710" style="width: 200rpx;">短信登录</van-button>
				</view>
			</view>
			
			<view class="toregister">
				您还没有账户? <text @click="register">注册</text>
			</view>
		</view>
	</view>
</template>

<script>
	import { Toast } from 'vant';
	import {getUser,Lgoin} from '../../request/api.js'
	import store from '../../store/index.js'
	export default {
		data() {
			return {
				user:'',
				pwd:'',
				showpwd:false,
				// 是否同意用户协议
				check:false,
				cb:true,
				userinfo:''
			}
		},
		methods: {
			onClickLeft(){
				
			},
			
			// 登录
			logIn(){
				if(!this.check){
					Toast({
					  message: '请先同意勾选用户协议',
					  position: 'center',
					});
				}else{
					Lgoin({user:this.user,pwd:this.pwd},(res=>{
						if(res.code==200){
							uni.setStorage({
								key:'isLogin',
								data:'true'
							})
							// 将数据存储到VueX中
							// console.log(res.data[0]);
							store.commit('setUser',res.data[0])
							uni.switchTab({
								url:'/pages/my/my'
							})
						}else {
							this.userinfo = res
						}
					}))
				}
			},
			checkState(){
				this.check = !this.check
			},
			
			// 注册页面
			register(){
				uni.navigateTo({
					url:'/pages/register/register'
				})
			}
		}
	}
</script>

<style lang="less">
page{
	background-color: #f3f3f3;
}
.topnav{
	border-bottom: 1rpx solid #aaaaaa;
}
	
.box{
	width: 100%;
	height: 89vh;
	box-sizing: border-box;
	padding: 40rpx;
	.log{
		border-radius: 15rpx;
		width: 100%;
		height: 750rpx;
		background-color: white;
		box-sizing: border-box;
		padding: 30rpx 20rpx;
		.title {
			margin: 20rpx 0;
			text-align: center;
			text{
			font-size: 1.8rem;
			}
		}
		.login{
			text-align: center;
			text{
				color: #aaaaaa;
			}
		}
	}
	.user{
		margin: 40rpx 0;
	}
	.user input{
		border: 1rpx solid #085710;
		height: 80rpx;
		margin-bottom: 15rpx;
		text-indent: 1em;
		border-radius: 50rpx;
	}
	// 点击按钮
	.clicklogin{
		margin: 50rpx 0;
		display: flex;
		justify-content: space-around;
	}
	.wj{
		margin: 10rpx 0;
		text-align: right;
		text{
			
		}
	}

// 还没有账号去注册
.toregister{
	margin-top: 600rpx;
	text-align: center;
	color: #9a9a9a;
	text{
		color: #353535;
	}
}
}
body .van-toast{
	background-color: coral;
}
</style>
